<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <h1>The Ajax 03 Page</h1>
 <fieldset>
    <legend>Ajax 表单请求(对Ajax共性代码进行封装)</legend>
    <form>
       <input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
       <input type="button" onclick="doSave()" value="Save">
    </form>
    <span id="result"></span>
 </fieldset>
 <script type="text/javascript" src="/ajax/ajax.js"></script>
 <!-- 在编程中我们要学会封装共性,提取特性,以实现代码的可重用性 -->
 <script type="text/javascript">
     function doClear(){
    	 document.getElementById("result").innerHTML="";
     }
     //保存业务的实现
     function doSave(){
    	//1.定义请求url
    	var url="doSave";
    	//2.定义请求参数
    	var params="name="+document.forms[0].name.value;
    	//3.发送异步的post请求
    	doAjaxPost(url,params,function(result){
    		document.getElementById("result").innerHTML=result;
    	})
     }
     //检查名字是否存在的业务代码
     function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
         //1.定义请求url
         var url="doCheck";
         //2.定义请求参数
         var name=document.forms[0].name.value;
         var params="name="+name;
         //3.发送异步Get请求
         doAjaxGet(url,params,function(result){
        	 document.getElementById("result").innerHTML=result;
         })
     }
 </script>
</body>
</html>